<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <title></title>
        <style>
        body{
            margin: 150px;
        }
        #canvas{
            box-shadow: 0 0 10px #000;
        }
        </style>
    </head>
    <body>
       <canvas id="canvas">当前浏览器不支持该版本</canvas>
    </body>
</html>
<script src="js/underscore.js"></script>
<script>
    //1.获取当前画布
    const canvas=document.getElementById('canvas');
    const ctx=canvas.getContext('2d');
    canvas.width=1000;
    canvas.height=600;
    canvas.style.backgroundColor='#000';
    //2.小球类
    class Ball{
        //构造器
        constructor(x,y,color){
            this.x=x;
            this.y=y;
            this.color=color;
            this.r=40;
        }
        //绘制小球
        render(){
            ctx.save();
            ctx.beginPath();
            ctx.arc(this.x , this.y , this.r , 0, Math.PI * 2);
            ctx.fillStyle=this.color;
            ctx.fill();
            ctx.restore();
        }
    }
    //3.会移动的小球类
    //类继承
    class MoveBall extends Ball{
        constructor(x,y,color){
            //调用父类
            super(x,y,color);
            this.dX=_.random(-5,5);
            this.dY=_.random(-5,5);
            this.dR=_.random(1,3);
        }
        upDate(){
            this.x+=this.dX;
            this.y+=this.dY;
            this.r-=this.dR;
            if(this.r<0){
                this.r=0;
            }
        }
    }
    //4. 实例化小球
    let ballArr=[];
    let colorArr=['red','green','blue','yellow','purple','pink','orange'];
    //5.监听鼠标移动
    canvas.addEventListener('mousemove',function(e){
        //做兼容
        // let e=e || event;
        //  let moveball=new MoveBall(e.offsetX,e.offsetY,colorArr[_.rendom(0,colorArr.length-1)]);
        ballArr.push(new MoveBall(e.offsetX,e.offsetY,colorArr[_.random(0,colorArr.length-1)]));
    })
    //6开启定时器
    setInterval(function(){
        //绘制前清屏
        ctx.clearRect(0,0,canvas.width,canvas.height);
        //绘制
        for(let i=0;i<ballArr.length;i++){
            ballArr[i].render();
            ballArr[i].upDate();
        }
    },50);
    // let ball=new Ball(50,50,'red');
    // ball.render();
</script>